<template>
	<div class="div1">
		<!-- 头部 -->

		<Head :data="searchList"></Head>

		<div style="background: #F6F5F7;">
			<div class="tong three">
				<div class="top">
					<div class="oneTop"><img src="../../assets/order/wancheng.png" class="chenggong" />
						{{ $t('payment.PayQuickly') }}</div>
					<div class="twoTop">
						<div class="leftT">{{ $t('payment.orderNumber') }}：{{ payNum }}</div>
						<div class="rightT">{{ $t('payment.ToBePaid') }}：<span>{{ getProportion(payMoney) }}{{DollarSignValue}}</span></div>
					</div>
				</div>
			</div>
			<div class="tong three">
				<ul class="navgator">
					<li class="navgatorLi" :class="{ 'isActive': index == navgatorIndex }" @click="handleLeft(index)"
						v-for="(item, index) in navgator" :key="index">{{ item }}</li>
				</ul>
				<div class="gerenxinxi" v-if="navgatorIndex == 3">
					<div class="zhifu">
						<img src="../../assets/foot/app.png" class="zhifuma" />
						<div class="zhifuText"><span>{{ $t('payment.useWeChat') }}</span></div>
					</div>
				</div>
				<div class="gerenxinxi" v-if="navgatorIndex == 0">
					<!--					<div class="zhifu">-->
					<!--						<img src="../../assets/foot/app.png" class="zhifuma" />-->
					<!--						<div class="zhifuText"><span>请使用支付宝扫一扫扫描二维码支付</span></div>-->
					<!--					</div>-->
					<div class="zhifuB">
						<div class="zhifuT">
							<img class="icons" src="../../assets/order/jinbi.png" />
							<div class="iconText">{{ $t('payment.AlipayPayment') }}</div>
							<div class="money">{{ getProportion(payMoney) }}{{ DollarSignValue }}</div>
						</div>
						<button class="zhifus" @click="alipay()">{{ $t('payment.ConfirmedPayment') }}</button>
					</div>
				</div>
				<div class="gerenxinxi" v-if="navgatorIndex == 1">
					<div class="zhifuB">
						<div class="zhifuT">
							<img class="icons" src="../../assets/order/jinbi.png" />
							<div class="iconText">{{ $t('payment.SmallChangePayment') }}</div>
							<div class="money">{{ getProportion(payMoney) }}{{ DollarSignValue }}</div>
						</div>
						<button class="zhifus" @click="lqPay()">{{ $t('payment.ConfirmedPayment') }}</button>
					</div>
				</div>
				<div class="gerenxinxi" v-if="navgatorIndex == 2">
					<div class="zhifuB">
						<div class="zhifuT">
							<img class="icons" src="../../assets/order/jinbi.png" />
							<div class="iconText">{{ $t('payment.WeChatPay') }}</div>
							<div class="money">{{ getProportion(payMoney) }}{{ DollarSignValue }}</div>
						</div>
						<button class="zhifus" @click="wxPay()">{{ $t('payment.ConfirmedPayment') }}</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Foots></Foots>
	</div>
</template>

<script>
import goodsItem from "../../components/goods-item";
import Head from '@/components/head.vue'
import Foots from '@/components/foots.vue'
import { currency } from '../js/currency'
export default {
	components: {
		Head,
		Foots,
		goodsItem
	},
	data() {
		return {
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			// navgator: ['支付宝支付', '零钱支付', '微信支付'],
			navgatorIndex: 0,
			payMoney: '',
			payNum: '',
			id: 0,
			orderType: '',
			goodsId: ''
		}
	},
	computed: {
		navgator() {
			const baseItems = ['payment.AlipayPayment','payment.SmallChangePayment','payment.WeChatPay'];
			return baseItems.map(item => (this.$t(item)));
		},
		DollarSignValue() {
			// let dollar=this.$store.state.currencyInfo.figure
			let dollar = this.getDollarSign()
			return dollar
		}
	},
	mounted() {

		let userId = this.$cookie.get('userId');
		this.id = this.$route.query.id
		this.goodsId = this.$route.query.goodsId
		this.payNum = this.$route.query.payNum
		this.payMoney = Number(this.$route.query.money).toFixed(2)
		this.orderType = this.$route.query.orderType
	},

	watch: {},
	methods: {
		// 获取货币符号
		getDollarSign() {
			let dollar = this.$store.state.currencyInfo.figure
			return dollar
		},
		// 金额计算比例
		getProportion(money) {
			let proportion = this.$store.state.currencyInfo.scale
			let price = currency(proportion, money)
			return price
			// return money
		},
		handleLeft(index) {
			this.navgatorIndex = index

		},
		//零钱支付
		lqPay() {
			const loading = this.$loading({
				lock: true,
				text: '支付中···',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.3)'
			});
			this.$http({
				url: this.$http.adornUrl('/orders/changePay'),
				method: 'get',
				params: this.$http.adornParams({
					'ordersId': this.id
				})
			}).then(res => {
				loading.close();
				if (res.data.status === 0) {
					loading.close();
					this.$message('支付成功');
					let that = this
					if (this.$route.path == '/shoppingCar') {
						this.delOrder()
					}
					setTimeout(function () {
						that.$router.push({
							path: '/order'
						});
					}, 1000);
				} else {
					this.$message({
						showClose: true,
						message: res.data.msg,
						type: 'error'
					})
				}
			});
		},
		//支付宝支付
		alipay() {
			let payNum = this.$route.query.payNum
			let userId = this.$cookie.get('userId');
			this.$http({
				url: this.$http.adornUrl('/aliPay/payment?payNum=' + payNum + '&userId=' + userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(res => {
				const div = document.createElement('div')
				div.innerHTML = res.data //此处form就是后台返回接收到的数据
				document.body.appendChild(div)
				document.forms[0].submit()

				if (this.$route.path == '/shoppingCar') {
					this.delOrder()
				}
			});
		},
		delOrder() {
			this.$http({
				url: this.$http.adornUrl('/selfCart/deleteAll'),
				method: 'get',
				params: this.$http.adornParams({
					'ids': this.goodsId
				})
			}).then(res => {

			});
		},
		wxPay() {
			let payNum = this.$route.query.payNum
			let userId = this.$cookie.get('userId');
			this.$http({
				url: this.$http.adornUrl('/pay/wxNativePay?payNum=' + payNum + '&userId=' + userId),
				method: 'post',
				params: this.$http.adornParams({})
			}).then(res => {
				if (res.data.code_url) {
					this.wxerweima = 'https://api.qrserver.com/v1/create-qr-code/?data=' + res.data.code_url
					this.dialogFormVisible = true
					// window.location.href=res.data.code_url
					if (this.$route.path == '/shoppingCar') {
						this.delOrder()
					}

					int = setInterval(() => {
						this.findJc()
					}, 3000)

				} else {
					this.$message({
						type: 'error',
						message: '获取支付码失败，稍后重试!'
					});
				}

				return
				const div = document.createElement('div')
				div.innerHTML = res.data.code_url //此处form就是后台返回接收到的数据
				document.body.appendChild(div)
				console.log(document.body)

				document.forms[0].submit()


			});
		},

	}
}
</script>

<style scoped="scoped">
.div1 {
	/* height: 50vh; */
	overflow-x: hidden;
}


/* 第一部分 */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

.three {
	margin-bottom: 20px;
	background: #fff;
}

.navgator {
	/* width: 200px; */
	position: relative;
	top: 0;
	border-bottom: 1px solid #efefef;
	line-height: 50px;

}

.navgatorLi {
	display: inline-block;
	justify-content: center;
	align-items: center;
	border-top: none;
	margin: 0 20px;
	cursor: pointer;
}

.isActive {
	color: #EA7408;
	border-bottom: 3px solid #EA7408;
}

.gerenxinxi {
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	margin: 50px 0;
}

.top {
	padding: 20px;
}

.oneTop {
	line-height: 40px;
	font-size: 24px;


}

.chenggong {
	width: 38px;
	height: 38px;
	position: relative;
	top: 8px;
}

.twoTop {
	width: 100%;
}

.twoTop div {
	width: 49.7%;
	display: inline-block;
	box-sizing: border-box;
	margin-top: 0px;
}

.leftT {}

.rightT {
	text-align: right;
}

.rightT span {
	color: #EA7408;
	font-size: 24px;
	font-weight: 600;
}

.zhifuma {
	width: 300px;
	height: 300px;
}

.zhifuText span {
	margin-top: 20px;
	background: #FFE5EA;
	color: #EA7408;
	font-size: 16px;
	border: none;
	width: 300px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
}

.zhifuB {
	width: 400px;
	background: #E5E4E5;
	margin: 0px auto;
	padding: 20px;
}

.zhifuT {}

.icons {
	width: 78px;
	height: 78px;
	margin-top: 40px;
}

.iconText {
	font-size: 16px;
	line-height: 26px;
}

.money {
	margin-top: 30px;
	font-size: 40px;
	font-weight: 600;
}

.zhifus {
	width: 100%;
	border: none;
	background: #EA7408;
	font-size: 16px;
	color: #fff;
	margin: 38px 0 80px;
	height: 50px;
	line-height: 50px;
}
</style>
